<template>
	<div class="search-mask">
		<div class="search-warp">
			<form class="search-form" style="width:100%;">
				<input type="search" placeholder="请输电话号码或姓名" v-model="msgInfo"style="width:70%;"/>
				<a href="javascript:;" class="cancelBtn" @click="infoInput()"style="position: relative;margin-left:5%;">确定</a>
				<a href="javascript:;" class="cancelBtn" @click="cancelLayer()" style="position: relative;margin-left:5%;">取消</a>
			</form>
		</div>
		<div class="search-history-record">
			<h3>历史记录</h3>
			<ul class="history-record-list">
				<li v-for="(item,index) in itemList" @click="searchEntrance(item.name)">{{item.name}}</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default {
		props: ['msgfrom'],
		data() {
			return {
				msgInfo: '',
				itemList:[]
			}
		},
		mounted () {
			this.objListInit()
		},
		methods:{
			cancelLayer: function(){
				this.$emit('child-tell',false);
			},
			infoInput:function(){
				this.$emit('search-text',this.msgInfo);
				this.cancelLayer();
				if(this.msgInfo.trim()){
					this.itemList.push({name:this.msgInfo})
					window.objList = JSON.stringify(this.itemList)
				}
			},
			searchEntrance:function(val){
				this.$emit('search-text',val);
				this.cancelLayer();
			},
			objListInit(){
				var objList = window.sessionStorage.getItem("objList");
				if(objList){
					for(var ii=0; ii<objList.length; ii++){
						this.itemList.push({name:JSON.parse(sessionStorage.getItem("objList"))[i].name})
					}
				}
			}
		}
	}
</script>